<!DOCTYPE html>
<html lang="en">
	<head>
    	 <meta name="layout" content="files">
        <title>绑定手机号</title>       
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'user_profile.css')}" type="text/css">
        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}"></script>
        <script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
        <style>
	    .form-qr-code-box {
		    position: initial;
		}
	    .form-qr-code-box button {
		    position: absolute;
		    border-radius: 0;
		    color: #fb6e50;
		    border-left: 1px solid #ccc;
		    top: 0;
		    right: 0px;
		    line-height: 38px;
		}
		</style>
    </head>
    
<body>

	<div class="ui-container">
        
    	<div class="header-line">
			<div class="ct">绑定手机号</div>
		</div>
        <div class="ui-form-item ui-border-b">
             <label for="#">手机号</label>
             <input id="mobile" type="text" placeholder="" value='${user.mobile}'>
        </div>

		<div class="ui-form-item ui-border-b show">
            <label for="#">验证码</label>
            <div class="form-qr-code-box">
                <input type="text" placeholder="验证码" id="authCode" style="width: 65%">
                <button type="button" style="width: 35%">发送验证码</button>
            </div>
        </div>
        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="submit()">提交</button>
            </div>
        </footer>
    </div>
    
    

	<script type="text/javascript">
	var authCodeStats = false;
	var changePhoneFlag = true;
	(function() {
		
		$('.form-qr-code-box button').click(function(){

            //发送短信
            var mobile = $('#mobile').val();
            if(!sendSMS(mobile)){//号码格式验证成功即返回true
                return;
            };

            var obj = $(this).attr('disabled', true);
            var count = null, i = 60;
            obj.text(i + '秒后可重发');
            count = setInterval(function(){
                i--;
                if (i <= 0) {
                    obj.removeAttr('disabled').text('重发验证码');
                    clearInterval(count)
                } else {
                    obj.text(i + '秒后可重发');
                }
            }, 1000)
        });
		
    })();
    
	function checkAuthCode(){
        var mobile = $("#mobile").val();
    	var value = $("#authCode").val();
    	$.ajax({
			url:"/scfire/user/authCode",
			type:'POST',
			data:{
				  "code":value,
				  "mobile":mobile
				  },
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				var result = JSON.parse(data).info.text;
				var code = JSON.parse(data).code;
				if(code=="200"){
				//	alert(result);
					authCodeStats = true;
				}else{
					alert('验证码校验失败！');
					authCodeStats = false;
				}				
			},
			error: function (data){
				alert('验证码校验失败！');
				authCodeStats = false;
			}
		}); 
    }
    
    function back(){
    	$('.step.step' + 1).show().siblings('.step').hide();
    	//console.log(value);
    }
    
    function submit(){
        
    	var originalPhoneNum = '${user.mobile}';
    	var mobile= $("#mobile").val();
    	
    	//修改手机号
        if(changePhoneFlag){
	        checkAuthCode();
	        if(!authCodeStats){
	        	//alert("您修改了手机号，请重新验证！");
	    		return;
	        }
        }
        
    	$.ajax({
			url:"/scfire/user/userInfoModify",
			type:'POST',
			data:{
				  "mobile":mobile
				  },
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				if(data=="success"){
					alert("手机绑定成功.");
					window.location.href='/scfire/';
				}
							
			},
			error: function (data){
				alert("提交失败.");
			}
		});
    }

    function sendSMS(mobile){

        if(!checkPhoneNumber(mobile)){
        	alert("号码格式不正确，短信发送失败.");
        	return false;
        }
    	$.ajax({
			url:"/scfire/SmsVerification/sendSmsVerification",
			type:'POST',
			data:{
				  "mobile":mobile
				  },
			dataType:'text',
			async: false,
			contentType: "application/x-www-form-urlencoded; charset=utf-8",
			success:function(data){
				var result = JSON.parse(data).info.text;
				if(data.code=="200"){
					alert('短信发送成功.');
				}else{
					alert(result);
				}				
			},
			error: function (data){
				alert("短信发送失败.请稍后再试");
			}
		});
    	return true;
    }

    function checkPhoneNumber(value){
    	var mobile = value
    	console.log(mobile)
        if(!(/^1[3|5|8][0-9]\d{8}$/.test(mobile))){ 
            //alert("手机号格式错误");
            //isPhoneNumVailded = false;
            return false; 
        }else{
        	//isPhoneNumVailded = true;
            return true;
        } 
    }
	</script>

</body>
</html>